<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        button {
            width: 200px;
            height: 100px;
            margin-top: 100px;
            position: relative;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <button v-shuibowen="">点击发散水波纹</button>
    </div>

    <script>
        // 按钮水波纹的动画指令 
        
        Vue.directive("shuibowen", {
            inserted(el, binding) {
                el.addEventListener('click', (e) => {
                    let x = e.x- el.offsetLeft;
                    let y = e.y - el.offsetTop;
                    // console.log(x,y);

                    // 在鼠标位置增加一个span标签
                    let span = document.createElement('span');
                    span.style.position = 'absolute';
                    span.style.background = binding.value || 'rbga(150,91,91,0.5)';
                    span.style.opacity = 1;
                    span.style.borderRadius = '50%';
                    el.appendChild(span);
                    let width = 0;
                    let height = 0;
                    let opacity = 1;
                    let max_length = Math.sqrt(el.offsetWidth * el.offsetWidth + el.offsetHeight * el.offsetHeight) * 2;
                    // console.log(max_length);
                    let time = setInterval(() => {
                        width += 5;
                        height += 5;
                        opacity -= 0.01;
                        // 判断超出最大值时，清除定时，并且删除span
                        if (width < max_length) {
                            span.style.width = width + 'px';
                            span.style.height = height + 'px';
                            span.style.opacity = opacity;
                            span.style.background='blue';
                            span.style.left = x - span.offsetWidth / 2 + 'px';
                            span.style.top = y - span.offsetHeight / 2 + 'px';
                        }
                        else {
                            clearInterval(time);
                            time = null;
                            span.remove();
                        }
                    }, 10)
                })

            }
        })



        const vm = new Vue({
            data: {
                title: "Vue 自定义设置水波纹 ",
            }
        }).$mount('#app')


    </script>
</body>

</html>